/* 考勤状况页面 */
<template>
  <div class="dashboard">
    <el-row :gutter="45" class="main-top">
      <el-col :span="6">
        <div class="top-grid-content" style="background-color: #00c0ef">
          <!-- 5.4添加,通过调用list方法获得返回结果集的员工人数-->
          <div>员工总数</div>
          <div style="font-size: 20px; margin-top: 15px">
            {{ pageInfo.total }}
          </div>
        </div>
      </el-col>

      <!-- 状态为正常的员工人数 -->
      <el-col :span="6">
        <div class="top-grid-content" style="background-color: #00a65a">
          <div>已签人数</div>
          <div style="font-size: 20px; margin-top: 15px">
            {{ nomralNumer }}
          </div>
        </div>
      </el-col>
      <!-- 状态为异常的员工人数 -->
      <el-col :span="6">
        <div class="top-grid-content" style="background-color: #dd4b39">
          <div>未签人数</div>
          <div style="font-size: 20px; margin-top: 15px">
            {{ abnomralNum }}
          </div>
        </div>
      </el-col>

      <!-- 关注数目前还未实现 -->
      <el-col :span="6">
        <div class="top-grid-content" style="background-color: #f39c12">
          <div>关注数</div>
          <div style="font-size: 20px; margin-top: 15px">53,123</div>
        </div>
      </el-col>
    </el-row>
    <div class="main">
      <areaStack />
    </div>
    <el-row :gutter="35" class="main-bottom">
      <el-col :span="8">
        <div class="main-bottom-content">
          <scatter />
        </div>
      </el-col>
      <el-col :span="8">
        <div class="main-bottom-content">
          <pieRoseType />
        </div>
      </el-col>
      <el-col :span="8">
        <div class="main-bottom-content">
          <barSimple />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import areaStack from "@/components/areaStack";
import scatter from "@/components/scatter";
import pieRoseType from "@/components/pieRoseType";
import barSimple from "@/components/barSimple";
export default {
  name: "Dashboard" /* 定义组件的名字 */,
  components: {
    areaStack,
    scatter,
    pieRoseType,
    barSimple,
  },
  /* 5.4新增加的数据定义 */
  created() {
    this.getEmptList();
    this.getNomCount();
    this.getAbNomCount();
  },
  //数据定义
  data() {
    return {
      nomralNumer: 0, //正常人数
      abnomralNum: 0, //异常人数
      departList: [], //员工列表
      //查询信息封装实体
      fromData: {
        name: "",
        pageIndex: 1, //当前页码，为第一页
        pageSize: 5, //默认每页最大数为5，可以动态的切换每页最大数
      },
      pageInfo: {
        total: 0, //信息总数，初始值为0
        pageSizes: [1, 5, 10, 20], //定义每次显示最大的条数
      },
    };
  },
  methods: {
    //获取所有用户，通过http请求的get方法调用后端的allUser接口方法
    async getEmptList() {
      const { data: res } = await this.$http.get(
        "http://localhost:9005/sys/employee/list",
        {
          params: this.fromData,
        }
      );
      if (res.code != 200) {
        this.$message.error("获取信息失败");
      }
      this.departList = res.data.list; //对用户列表数据封装
      this.pageInfo.total = res.data.total; //总用户数封装，number指的是后台的""number"属性名
    },

    //获得正常员工人数方法
    async getNomCount() {
      const { data: res } = await this.$http.get(
        "http://localhost:9005/sys/attendance/getNomCount"
      );
      if (res.code != 200) {
        this.$message.error("操作失败");
      }
      this.nomralNumer = res.data; //将获得后端的人数进行赋值
    },

    //获得异常员工人数方法
    async getAbNomCount() {
      const { data: res } = await this.$http.get(
        "http://localhost:9005/sys/attendance/getAbNomCount"
      );
      if (res.code != 200) {
        this.$message.error("操作失败");
      }
      this.abnomralNum = res.data; //将获得后端的人数进行赋值
    },
  },
};
</script>
<style Lang="less" scoped>
.dashboard {
  height: calc(100vh - 50px);
  width: 100%;
  background-color: #f0f2f5;
}
.main-top {
  padding: 40px 15px 30px 15px;
}
.top-grid-content {
  font-size: 35px;
  color: #fff;
  text-align: center;
  padding-top: 15px;
  border-radius: 8px;
  min-height: 120px;
}
.main {
  margin: 0px 15px;
  background-color: #fff;
}
.main-bottom {
  padding: 30px 15px;
}
.main-bottom-content {
  background-color: #fff;
}
</style>  